<template>
  <a-spin wrapperClassName="manage_table_page" :spinning="isLoading">
    <a-list item-layout="vertical" size="large" :data-source="_listData">
      <template #renderItem="{ item }">
        <div class="warrper">
          <div class="top">
            <div class="title">
              {{ item.queTitle }}
            </div>

            <div class="basic">
              <div class="id item">{{ `ID：${item.queId}` }}</div>

              <template v-if="item.status === '1'">
                <div class="status item">已发布</div>
              </template>

              <template v-else>
                <div class="status item">未发布</div>
              </template>

              <div class="answer item">{{ `答案：${item.answerCount}` }}</div>

              <div class="create_time item">{{ item.createTime }}</div>
            </div>
          </div>

          <div class="bottom">
            <div class="option">
              <a-popover
                placement="bottom"
                :getPopupContainer="
                  (triggerNode) => {
                    return triggerNode.parentNode || document.body;
                  }
                "
              >
                <!-- 设计问卷 -->
                <a-button type="link">
                  <template #icon>
                    <FormOutlined />
                  </template>
                  设计问卷
                </a-button>

                <template #content>
                  <div class="button_warpper">
                    <a-button type="text" @click="handlEdit(item.queId)"
                      >编辑问卷</a-button
                    >

                    <a-button type="text" @click="handlSetting(item.queId)"
                      >问卷设置</a-button
                    >
                  </div>
                </template>
              </a-popover>

              <!-- 问卷发布 -->
              <a-popover
                placement="bottom"
                :getPopupContainer="
                  (triggerNode) => {
                    return triggerNode.parentNode || document.body;
                  }
                "
              >
                <a-button type="link">
                  <template #icon>
                    <PieChartOutlined />
                  </template>
                  问卷发布
                </a-button>

                <template #content>
                  <div class="button_warpper">
                    <a-button type="text" @click="handleUrl(item.queId)"
                      >链接发布</a-button
                    >

                    <a-button type="text" @click="handleQRcode(item.queId)"
                      >二维码发布</a-button
                    >
                  </div>
                </template>
              </a-popover>

              <!-- 问卷分析 -->
              <a-popover
                placement="bottom"
                :getPopupContainer="
                  (triggerNode) => {
                    return triggerNode.parentNode || document.body;
                  }
                "
              >
                <a-button type="link">
                  <template #icon>
                    <SendOutlined />
                  </template>
                  问卷分析
                </a-button>

                <template #content>
                  <div class="button_warpper">
                    <a-button type="text" @click="handleAnalysis(item.queId)"
                      >问卷分析</a-button
                    >

                    <a-button type="text" @click="handleStatistics(item.queId)"
                      >问卷统计</a-button
                    >
                  </div>
                </template>
              </a-popover>
            </div>

            <div class="">
              <template v-if="item.status === '1'">
                <a-button type="text" @click="handlSuspend(item.queId)">
                  <template #icon>
                    <pause-circle-filled />
                  </template>
                  暂停
                </a-button>
              </template>

              <template v-else>
                <a-button type="text" @click="handlePublic(item.queId)">
                  <template #icon>
                    <PlayCircleFilled />
                  </template>
                  发布
                </a-button>
              </template>

              <a-button type="text" @click="handleCopy(item.queId)">
                <template #icon>
                  <CopyOutlined />
                </template>
                复制
              </a-button>

              <a-button type="text" @click="handleDetele(item.queId)">
                <template #icon>
                  <DeleteOutlined />
                </template>
                删除
              </a-button>
            </div>
          </div>
        </div>
      </template>
    </a-list>

    <div class="pagination">
      <a-pagination
        v-model:current="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        :page-size-options="pagination.pageSizeOptions"
        :total="Number(pagination.total)"
        :show-total="(total) => `总共有 ${total}条`"
        @change="paginationChange"
      />
    </div>
  </a-spin>
</template>
<script lang="ts">
import { PaginationParam } from '@/model/common/PaginationParam';
import QuestionaireBasic from '@/model/questionaire/QuestionaireBasic';
import {
  CopyOutlined,
  DeleteOutlined,
  FormOutlined,
  PieChartOutlined,
  PlayCircleFilled,
  SendOutlined,
  PauseCircleFilled,
} from '@ant-design/icons-vue';
import { computed, defineComponent } from 'vue';

export default defineComponent({
  components: {
    FormOutlined,
    PieChartOutlined,
    SendOutlined,
    PlayCircleFilled,
    CopyOutlined,
    DeleteOutlined,
    PauseCircleFilled,
  },
  props: {
    listData: { type: Array, required: true },
    pagination: { type: Object, required: true },
    /** 加载状态 */
    isLoading: { type: Boolean, default: false },
  },
  emits: [
    'handlEdit',
    'handlSetting',
    'handleUrl',
    'handleQRcode',
    'handleAnalysis',
    'handleStatistics',
    'handlePublic',
    'handleCopy',
    'handleDetele',
    'paginationChange',
    'handlSuspend',
  ],
  setup(props, { emit }) {
    // computed 计算props属性
    // 数据
    const _listData = computed<QuestionaireBasic[]>(() => {
      return props.listData as QuestionaireBasic[];
    });

    // 分页数据
    const _paginations = computed<PaginationParam>(() => {
      return props.pagination as PaginationParam;
    });

    const handlEdit = (value: string) => {
      emit('handlEdit', value);
    };

    const handlSetting = (value: string) => {
      emit('handlSetting', value);
    };

    const handleUrl = (value: string) => {
      emit('handleUrl', value);
    };

    const handleQRcode = (value: string) => {
      emit('handleQRcode', value);
    };

    const handleAnalysis = (value: string) => {
      emit('handleAnalysis', value);
    };

    const handleStatistics = (value: string) => {
      emit('handleStatistics', value);
    };

    const handlePublic = (value: string) => {
      emit('handlePublic', value);
    };

    const handleCopy = (value: string) => {
      emit('handleCopy', value);
    };

    const handleDetele = (value: string) => {
      emit('handleDetele', value);
    };

    const handlSuspend = (value: string) => {
      console.log('handlSuspend');
      emit('handlSuspend', value);
    };

    const paginationChange = (value: number, size: number) => {
      // console.log('paginationChange');
      emit('paginationChange', value, size);
    };

    return {
      _listData,
      _paginations,
      handlEdit,
      handlSetting,
      handleUrl,
      handleQRcode,
      handleAnalysis,
      handleStatistics,
      handlePublic,
      handleCopy,
      handleDetele,
      paginationChange,
      handlSuspend,
    };
  },
});
</script>
<style lang="less" scoped>
.manage_table_page {
  .warrper:hover {
    box-shadow: 0px 0px 4px 0px #fca428;
    border: 1px solid #fca428;
  }
  .warrper {
    width: 1050px;
    height: 121px;
    background: #fff;
    border-radius: 2px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 4px 0px #f0f0f0;
    border: 1px solid #e6e6e6;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;

      padding: 13px 24px 0;
      font-size: 16px;
      height: 35px;
      line-height: 22px;
      color: #262626;
      .title {
        display: flex;
      }
      .basic {
        display: flex;
        .item {
          margin: 0 0 0 12px;
        }
      }
    }
    .bottom {
      align-items: center;
      justify-content: space-between;
      display: flex;

      margin: 13px 24px 0;
      height: 72px;
      line-height: 36px;
      padding: 18px 0 18px;
      border-top: 1px solid #f5f5f5;

      .option {
        width: 360px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .button_warpper {
          display: flex;
          flex-direction: column;
          button {
            width: 100%;
            margin-top: 12px;
          }
          button:hover {
            background-color: #f0f2f5;
          }
        }
      }
    }
  }
  .pagination {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
